<template>
  <div>
    <el-table :data="testSampleList" @expand-change="expandChange" row-key="id" :expand-row-keys="expandRowKeys">
      <el-table-column type="expand" width="15px">
        <template slot-scope="scope">
          <el-table
            :data="scope.row.dropSampleList"
            v-loading="scope.row.droploading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            :span-method="(params) => objectSpanMethod(params, scope.$index)"
            :key="scope.$index"
          >
          </el-table>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //下拉表格展开行id的数组
      expandRowKeys: [],
      testSampleList: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
    }
  },
  methods: {
    // 展开事件----动态获取内嵌表数据
    expandChange: function (row, expandedRows) {
      // 该处是用于判断是展开还是收起行，只有展开的时候做请求，避免多次请求！
      // 展开的时候expandedRows有值，收起的时候为空.
      if (expandedRows.length) {
        this.expandRowKeys = []
        this.expandRowKeys.push(row.id)
        this.tankInfoTable = []
        for (let m = 0; m < this.testSampleList.length; m++) {
          if (this.testSampleList[m].id == row.id) {
            this.tankInfoTable.push(this.testSampleList[m])
          }
        }
        this.getTestSampleTable(row)
      }
    },
    //下拉菜单接口
    getTestSampleTable(row) {
      let query = row.id
      row.droploading = true
      getTestSample(query).then((res) => {
        this.testSampleList.forEach((temp, index) => {
          // 找到当前点击的行，把动态获取到的数据赋值进去
          if (temp.id == row.id) {
            this.testSampleList[index].dropSampleList = res.rows
            this.testSampleList[index].spanArr = []
            this.getSpanArr(this.testSampleList, index)
          }
        })
        row.droploading = false
      })
    },
    //下拉菜单合并行
    getSpanArr(testSampleList, index, dropSampleList) {
      let data = testSampleList[index].dropSampleList
      this.spanArr = []
      this.pos = 0
      // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          // console.log(data[i],"data")
          if (data[i].testitemsNumber === data[i - 1].testitemsNumber) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            // 不相等push 1
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
      this.$set(this.testSampleList[index], 'spanArr', this.spanArr)
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }, index) {
      if (columnIndex === 3) {
        const _row = this.testSampleList[index].spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col,
        }
      }
    },
  },
}
</script>